<!-- <template>
数据库查询
</template>

<script>
export default {
    question:'data'
}
</script>

<style scoped>

</style> -->

<template>
    <div>
      <input v-model="question" placeholder="Enter your question">
      <button @click="sendPost">Send POST request</button>
      <button @click="stopGenerating">Stop Generating</button>
      <button @click="restartGenerating">Restart Generating</button>
      <pre>{{ response }}</pre>
    </div>
  </template>
   
<script>
import { ref } from 'vue';

export default {
  setup() {
    const question = ref('')
    const response = ref('')
    const controller = ref(new AbortController())
    const isStopped = ref(false)
  
    async function sendPost() {
      controller.value = new AbortController()
      response.value = ''
      isStopped.value = false
      const res = await fetch('http://127.0.0.1:5000/stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: question.value }),
        signal: controller.value.signal
      })
      const reader = res.body.getReader()
      while (true) {
        if (isStopped.value) break
        const { done, value } = await reader.read()
        if (done) break
        response.value += new TextDecoder().decode(value)
      }
    }
  
    function stopGenerating() {
      controller.value.abort()
      isStopped.value = true
    }
  
    function restartGenerating() {
      controller.value = new AbortController()
      sendPost()
    }
  
    return {
      question,
      response,
      sendPost,
      stopGenerating,
      restartGenerating
    }
  }
}
</script>


<!-- <template>
  <div>
    <input v-model="question" placeholder="Enter your question">
    <button @click="sendPost">Send POST request</button>
    <button @click="stopGenerating">Stop Generating</button>
    <button @click="restartGenerating">Restart Generating</button>
    <pre>{{ response }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      response: '',
      controller: new AbortController(),
      isStopped: false
    };
  },
  methods: {
    async sendPost() {
      this.controller = new AbortController();
      this.response = '';
      this.isStopped = false;
      try {
        const res = await fetch('http://127.0.0.1:5000/stream', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ question: this.question }),
          signal: this.controller.signal
        });
        const reader = res.body.getReader();
        while (true) {
          if (this.isStopped) break;
          const { done, value } = await reader.read();
          if (done) break;
          this.response += new TextDecoder().decode(value);
        }
      } catch (error) {
        console.error('Error sending POST request:', error);
      }
    },
    stopGenerating() {
      this.controller.abort();
      this.isStopped = true;
    },
    restartGenerating() {
      this.controller = new AbortController();
      this.sendPost();
    }
  }
};
</script> -->
